<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
<div id="app">
    <!-- v-vind:简写冒号。绑定:属性、样式、类 -->
    <p :style="{color:fontColor}">{{msg}}</p>
    <button v-on:click="msg='娃哈哈'">改变内容</button>
    <!-- v-on:简写@ -->
    <button @click="changeContent()">改变内容1</button>
    <button @click="changeContentColor()">改变字体颜色</button>
</div>
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '今天的天气很好！',
            fontColor: 'red'
        },
        methods: {  // 实例所以函数实现
            // 钩子函数
            changeContent() {
                // alert(0);
                this.msg = '测试改掉没有！';
            },
            changeContentColor() {
                this.fontColor = 'green';
            }
        }
    });
</script>
</body>
</html>